<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="user-scalable=no">-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>mydemo1</title>
    <script src="js/three73.js"></script>
    <!--<script src="js/Stats.js"></script>-->
    <!--<script src="js/dat.gui.js"></script>-->
    <script src="js/zepto.min.js"></script>
    <script src="js/toucher.js"></script>
    <script src="js/tween.min.js"></script>
    <!--<script src="js/DeviceOrientationControls.js"></script>
    <script src="js/OrbitControls.js"></script>
-->
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }

        #list{
            color: #fff;
            position: absolute;
            top: 0;
            font-size: 16px;
            list-style: none;
            font-family: "华文楷体";
            display: none;
        }
        #list li{
            text-decoration: none;
        }
        #list li:hover{
            border-bottom: 1px solid red;
            color: indianred;
        }
        #WebGL-output{
            display: none;
        }

        /* Second Loadin Circle */

        .loading
        {
            position: fixed;
            width: 100%;
            height: 100%;
            background: #161616 url(img/pattern_40.gif) top left repeat;
        }

        .content{
            margin-top: 45%;
        }

        .word{
            font-size: 45px;
            text-align: center;
            color: rgba(0, 183, 229, 0.9);
            position: relative;
            top: -60px;
        }
        .circle {
            background-color: rgba(0,0,0,0);
            border:15px solid rgba(0,183,229,0.9);
            opacity:.9;
            border-right:15px solid rgba(0,0,0,0);
            border-left:15px solid rgba(0,0,0,0);
            -webkit-border-radius: 150px;
            -moz-border-radius: 150px;
            border-radius: 150px;
            box-shadow: 0 0 105px #2187e7;
            width:150px;
            height:150px;
            margin:0 auto;
            -moz-animation:spinPulse 1s infinite linear;
            -webkit-animation:spinPulse 1s infinite linear;
            animation:spinPulse 1s infinite linear;
        }
        .circle1 {
            background-color: rgba(0,0,0,0);
            border:15px solid rgba(0,183,229,0.9);
            opacity:.9;
            border-left:15px solid rgba(0,0,0,0);
            border-right:15px solid rgba(0,0,0,0);
            -webkit-border-radius: 150px;
            -moz-border-radius: 150px;
            border-radius: 150px;
            box-shadow: 0 0 45px #2187e7;
            width:90px;
            height:90px;
            margin:0 auto;
            position:relative;
            top:-150px;
            -moz-animation:spinoffPulse 1s infinite linear;
            -webkit-animation:spinoffPulse 1s infinite linear;
            animation:spinoffPulse 1s infinite linear;
        }
        @-moz-keyframes spinPulse {
            0% { -moz-transform:rotate(160deg); /*opacity:0.; -moz-box-shadow:0 0 1px #2187e7;*/}
            50% { -moz-transform:rotate(145deg); opacity:1; }
            100% { -moz-transform:rotate(-320deg); opacity:0; }
        }
        @-webkit-keyframes spinPulse {
            0% { -webkit-transform:rotate(160deg);/* opacity:0; -webkit-box-shadow:0 0 1px #2187e7;*/ }
            50% { -webkit-transform:rotate(145deg); opacity:1;}
            100% { -webkit-transform:rotate(-320deg); opacity:0; }
        }
        @keyframes spinPulse {
            0% { transform:rotate(160deg); /*opacity:0; box-shadow:0 0 1px #2187e7;*/}
            50% { transform:rotate(145deg); opacity:1; }
            100% { transform:rotate(-320deg); opacity:0; }
        }

        @-moz-keyframes spinoffPulse {
            0% { -moz-transform:rotate(0deg); }
            100% { -moz-transform:rotate(360deg);  }
        }
        @-webkit-keyframes spinoffPulse {
            0% { -webkit-transform:rotate(0deg); }
            100% { -webkit-transform:rotate(360deg); }
        }
        @keyframes spinoffPulse {
            0% { transform:rotate(0deg); }
            100% { transform:rotate(360deg); }
        }

        img{
            display:none;
        }

        #percent{
            font-size: 45px;
            text-align: center;
            color: rgba(0, 183, 229, 0.9);
            position: relative;
            top: -288px;
        }
    </style>
</head>
<body>
<div class="loading">
    <div class="content">
        <div class="circle"></div>
        <div class="circle1"></div>
        <div class="word" >LOADING</div>
        <div id="percent">0%</div>
    </div>
</div>
<div id="WebGL-output"></div>
<div id="Stats-output"></div>
<img src="img/2.jpg"/>
<img src="img/1.png"/>
<img src="img/2.png" />
<img src="img/3.png" />
<img src="img/4.png" />
<img src="img/5.png"/>
<img src="img/6.png"/>
<img src="img/9.png" />
<img src="img/10.png" />
<img src="img/11.png"/>
<img src="img/12.png" />
<img src="img/13.png"/>
<img src="img/14.png" />
<ul id="list">
    <li>移到第三张图的视角</li>
    <li>移到第五张图的视角</li>
    <li>移到第九张图的视角</li>
    <li>移到最后的视角</li>
</ul>

<script>
    function perFun(){
        var imgs = document.getElementsByTagName("img");
        var len = 0;
        var percent = document.getElementById("percent");
        for(var i=0; i<imgs.length; i++){
            (function(i){
                imgs[i].onload = function(){
                    len ++;
                    percent.innerText = Math.round(len*100/imgs.length) + "%";
                }
            })(i);
        }
    }
    perFun();
    window.onload = function(){

        /*var stats = initStats();*/
        /*鼠标移动*/
        var mouseX = 0, mouseY = 0,

                windowHalfX = window.innerWidth / 2,
                windowHalfY = window.innerHeight / 2

        var scene = new THREE.Scene();
        // scene.fog = new THREE.Fog(0xffffff,0.015,100);

        var camera = new THREE.PerspectiveCamera(30,window.innerWidth/window.innerHeight,0.1,1000);

        /* var axex = new THREE.AxisHelper(20);
         scene.add(axex);*/


        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x0B1835);
        renderer.setSize(window.innerWidth,window.innerHeight);

        var spotLight= new THREE.SpotLight(0x70f3ff);
        spotLight.position.set(100,0,100);
        spotLight.castShadow = true;
        scene.add(spotLight);

        var ambiColor = "#a72727";
        var ambientLight = new THREE.AmbientLight(ambiColor);
        scene.add(ambientLight);

        var planeGeometry1 = new THREE.PlaneGeometry(4,4,1,1);
        var planeGeometry2 = new THREE.PlaneGeometry(8,8,1,1);
        var planeGeometry3 = new THREE.PlaneGeometry(137,77,1,1);
        var loader = new THREE.TextureLoader();
//        loader.setCrossOrigin( this.crossOrigin );
        var textures1 = loader.load("img/1.png");
        var textures2 = loader.load("img/9.png");
        var textures3 = loader.load("img/10.png");
        var textures4 = loader.load("img/11.png");
        var textures5 = loader.load("img/12.png");
        var textures6 = loader.load("img/13.png");
        var textures7 = loader.load("img/2.png");
        var textures8 = loader.load("img/3.png");
        var textures9 = loader.load("img/4.png");
        var textures10 = loader.load("img/5.png");
        var textures11 = loader.load("img/6.png");
        var textures12 = loader.load("img/14.png");
        var textures13 = loader.load("img/11.jpg");
        var planeMaterial1 = new THREE.MeshBasicMaterial({map:textures1,opacity:1,transparent:true});
        var planeMaterial2 = new THREE.MeshBasicMaterial({map:textures2,opacity:1,transparent:true,side:THREE.DoubleSide});
        var planeMaterial3 = new THREE.MeshBasicMaterial({map:textures3,opacity:1,transparent:true,side:THREE.DoubleSide});
        var planeMaterial4 = new THREE.MeshBasicMaterial({map:textures4,opacity:1,transparent:true,side:THREE.DoubleSide});
        var planeMaterial5 = new THREE.MeshBasicMaterial({map:textures5,opacity:1,transparent:true,side:THREE.DoubleSide});
        var planeMaterial6 = new THREE.MeshBasicMaterial({map:textures6,opacity:1,transparent:true,side:THREE.DoubleSide});
        var planeMaterial7 = new THREE.MeshBasicMaterial({map:textures7,opacity:1,transparent:true,side:THREE.DoubleSide});
        var planeMaterial8 = new THREE.MeshBasicMaterial({map:textures8,opacity:1,transparent:true,side:THREE.DoubleSide});
        var planeMaterial9 = new THREE.MeshBasicMaterial({map:textures9,opacity:1,transparent:true,side:THREE.DoubleSide});
        var planeMaterial10 = new THREE.MeshBasicMaterial({map:textures10,opacity:1,transparent:true,side:THREE.DoubleSide});
        var planeMaterial11 = new THREE.MeshBasicMaterial({map:textures11,opacity:1,transparent:true,side:THREE.DoubleSide});
        var planeMaterial12 = new THREE.MeshBasicMaterial({map:textures12,opacity:1,transparent:true,side:THREE.DoubleSide});
        var planeMaterial13 = new THREE.MeshBasicMaterial({map:textures13,opacity:1,transparent:true,side:THREE.DoubleSide});

        var plane1 = new THREE.Mesh(planeGeometry1,planeMaterial1);
        var plane2 = new THREE.Mesh(planeGeometry1,planeMaterial2);
        var plane3 = new THREE.Mesh(planeGeometry1,planeMaterial2);
        plane3.rotation.y = Math.PI;
        var plane4 = new THREE.Mesh(planeGeometry1,planeMaterial3);
        var plane5 = new THREE.Mesh(planeGeometry1,planeMaterial3);
        plane5.rotation.y = Math.PI;
        var plane6 = new THREE.Mesh(planeGeometry1,planeMaterial4);
        var plane7 = new THREE.Mesh(planeGeometry1,planeMaterial4);
        plane7.rotation.y = Math.PI;
        var plane8 = new THREE.Mesh(planeGeometry1,planeMaterial5);
        var plane9 = new THREE.Mesh(planeGeometry1,planeMaterial5);
        plane9.rotation.y = Math.PI;
        var plane10 = new THREE.Mesh(planeGeometry1,planeMaterial6);
        var plane11 = new THREE.Mesh(planeGeometry1,planeMaterial6);
        plane11.rotation.y = Math.PI;
        var plane12 = new THREE.Mesh(planeGeometry2,planeMaterial7);
        var plane13 = new THREE.Mesh(planeGeometry2,planeMaterial8);
        var plane14 = new THREE.Mesh(planeGeometry2,planeMaterial9);
        var plane15 = new THREE.Mesh(planeGeometry2,planeMaterial10);
        var plane16 = new THREE.Mesh(planeGeometry2,planeMaterial11);
        var plane17 = new THREE.Mesh(planeGeometry2,planeMaterial12);
        var plane18 = new THREE.Mesh(planeGeometry3,planeMaterial13);

        plane1.position.set(0,0,0);
        plane2.position.set(2,0,10);
        plane3.position.set(-2,0,10);
        plane4.position.set(2,0,20);
        plane5.position.set(-2,0,20);
        plane6.position.set(2,0,30);
        plane7.position.set(-2,0,30);
        plane8.position.set(2,0,40);
        plane9.position.set(-2,0,40);
        plane10.position.set(-2,0,50);
        plane11.position.set(2,0,50);
        plane12.position.set(0,0,60);
        plane13.position.set(2,-2,70);
        plane14.position.set(-4,-2,80);
        plane15.position.set(3,2,90);
        plane16.position.set(2,-4,100);
        plane17.position.set(-2,-4,110);
        plane18.position.set(0,0,-10);

        scene.add(plane1);
        scene.add(plane2);
        scene.add(plane3);
        scene.add(plane4);
        scene.add(plane5);
        scene.add(plane6);
        scene.add(plane7);
        scene.add(plane8);
        scene.add(plane9);
        scene.add(plane10);
        scene.add(plane11);
        scene.add(plane12);
        scene.add(plane13);
        scene.add(plane14);
        scene.add(plane15);
        scene.add(plane16);
        scene.add(plane17);
        scene.add(plane18);

        camera.position.set(0,0,10);
        camera.lookAt(scene.position);

        // controls = new THREE.DeviceOrientationControls( camera );
        /*鼠标移动*/
        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
        document.addEventListener( 'touchstart', onDocumentTouchStart, false );
        document.addEventListener( 'touchmove', onDocumentTouchMove, false );

        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize(window.innerWidth, window.innerHeight);

        document.getElementById('WebGL-output').appendChild(renderer.domElement);

        /*鼠标移动*/
        function onWindowResize() {

            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;

            //    camera.aspect = window.innerWidth / window.innerHeight;
            //     camera.updateProjectionMatrix();

            //   renderer.setSize( window.innerWidth, window.innerHeight );

            //   effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );

            //  composer.reset();

        }
        function onDocumentMouseMove( event ) {

            mouseX = event.clientX - windowHalfX;
            mouseY = event.clientY - windowHalfY;

        }
        function onDocumentTouchStart( event ) {

            if ( event.touches.length > 1 ) {

                event.preventDefault();

                mouseX = event.touches[ 0 ].pageX - windowHalfX;
                mouseY = event.touches[ 0 ].pageY - windowHalfY;

            }

        }
        function onDocumentTouchMove( event ) {

            if ( event.touches.length == 1 ) {

                event.preventDefault();

                mouseX = event.touches[ 0 ].pageX - windowHalfX;
                mouseY = event.touches[ 0 ].pageY - windowHalfY;
            }

        }
        /* var controls = new function(){
         this.cameraZPosition = 4;
         this.ambientColor = ambiColor;
         };
         */
        /*var gui = new dat.GUI();
         gui.add(controls,'cameraZPosition',0,200);
         gui.addColor(controls,'ambientColor').onChange(function(e){
         ambientLight.color = new THREE.Color(e);
         });*/

        renderScene();

        function renderScene(){
            /*stats.update();*/
            TWEEN.update();
            // camera.lookAt( scene.position );
            //camera.position.z = controls.cameraZPosition;
            //controls.update();
            requestAnimationFrame(renderScene);
            renderer.render(scene,camera);
        }

        /* function initStats(){
         var stats = new Stats();
         stats.setMode(0);
         stats.domElement.style.position = 'absolute';
         stats.domElement.style.left = '0px';
         stats.domElement.style.top = '0px';
         document.getElementById('Stats-output').appendChild(stats.domElement);
         return stats;
         }*/

        /*  var touch = {},
         touchTimeout, tapTimeout, swipeTimeout, longTapTimeout,
         longTapDelay = 750,
         gesture;

         function swipeDirection(x1, x2, y1, y2) {
         return Math.abs(x1 - x2) >=
         Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
         }

         function longTap() {
         longTapTimeout = null;
         if (touch.last) {
         touch.el.trigger('longTap');
         touch = {}
         }
         }

         function cancelLongTap() {
         if (longTapTimeout) clearTimeout(longTapTimeout);
         longTapTimeout = null
         }

         function cancelAll() {
         if (touchTimeout) clearTimeout(touchTimeout);
         if (tapTimeout) clearTimeout(tapTimeout);
         if (swipeTimeout) clearTimeout(swipeTimeout);
         if (longTapTimeout) clearTimeout(longTapTimeout);
         touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null;
         touch = {}
         }

         function isPrimaryTouch(event){
         return (event.pointerType == 'touch' ||
         event.pointerType == event.MSPOINTER_TYPE_TOUCH)
         && event.isPrimary
         }

         function isPointerEventType(e, type){
         return (e.type == 'pointer'+type ||
         e.type.toLowerCase() == 'mspointer'+type)
         }

         $(document).ready(function(){
         var now, delta, deltaX = 0, deltaY = 0, firstTouch, _isPointerType;

         if ('MSGesture' in window) {
         gesture = new MSGesture();
         gesture.target = document.body
         }

         $(document)
         .bind('MSGestureEnd', function(e){
         var swipeDirectionFromVelocity =
         e.velocityX > 1 ? 'Right' : e.velocityX < -1 ? 'Left' : e.velocityY > 1 ? 'Down' : e.velocityY < -1 ? 'Up' : null
         if (swipeDirectionFromVelocity) {
         touch.el.trigger('swipe');
         touch.el.trigger('swipe'+ swipeDirectionFromVelocity)
         }
         })
         .on('touchstart MSPointerDown pointerdown', function(e){
         if((_isPointerType = isPointerEventType(e, 'down')) &&
         !isPrimaryTouch(e)) return;
         firstTouch = _isPointerType ? e : e.touches[0];
         if (e.touches && e.touches.length === 1 && touch.x2) {
         touch.x2 = undefined;
         touch.y2 = undefined;
         }
         now = Date.now();
         delta = now - (touch.last || now);
         touch.el = $('tagName' in firstTouch.target ?
         firstTouch.target : firstTouch.target.parentNode);
         touchTimeout && clearTimeout(touchTimeout);
         touch.x1 = firstTouch.pageX;
         touch.y1 = firstTouch.pageY;
         if (delta > 0 && delta <= 250) touch.isDoubleTap = true;
         touch.last = now;
         longTapTimeout = setTimeout(longTap, longTapDelay);
         if (gesture && _isPointerType) gesture.addPointer(e.pointerId)
         })
         .on('touchmove MSPointerMove pointermove', function(e){
         if((_isPointerType = isPointerEventType(e, 'move')) &&
         !isPrimaryTouch(e)) return;
         firstTouch = _isPointerType ? e : e.touches[0];
         cancelLongTap();
         touch.x2 = firstTouch.pageX;
         touch.y2 = firstTouch.pageY;

         deltaX += Math.abs(touch.x1 - touch.x2);
         deltaY += Math.abs(touch.y1 - touch.y2)
         })
         .on('touchend MSPointerUp pointerup', function(e){
         if((_isPointerType = isPointerEventType(e, 'up')) &&
         !isPrimaryTouch(e)) return;
         cancelLongTap();

         // swipe
         if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
         (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))

         swipeTimeout = setTimeout(function() {
         if (touch.el){
         touch.el.trigger('swipe');
         touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
         }
         touch = {}
         }, 0);

         // normal tap
         else if ('last' in touch)
         if (deltaX < 30 && deltaY < 30) {
         tapTimeout = setTimeout(function() {

         var event = $.Event('tap');
         event.cancelTouch = cancelAll;
         if (touch.el) touch.el.trigger(event);

         if (touch.isDoubleTap) {
         if (touch.el) touch.el.trigger('doubleTap');
         touch = {}
         }

         else {
         touchTimeout = setTimeout(function(){
         touchTimeout = null;
         if (touch.el) touch.el.trigger('singleTap');
         touch = {}
         }, 250)
         }
         }, 0)
         } else {
         touch = {}
         }
         deltaX = deltaY = 0

         })

         .on('touchcancel MSPointerCancel pointercancel', cancelAll);

         $(window).on('scroll', cancelAll)
         })

         ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown',
         'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(eventName){
         $.fn[eventName] = function(callback){ return this.on(eventName, callback) }
         });*/

        var timer1 = null;
        var timer2 = null;
        var timer3 = null;
        var timer4 = null;
        var timer5 = null;
        var timer6 = null;
        var timer7 = null;
        var timer8 = null;
        var timer9 = null;
        var timer10 = null;
        var timer11 = null;

        var webgl = document.getElementById('WebGL-output')

        var upon = 0;
        var downon = 0;
        var mouseonx = 1;
        var mouseony = 1;

        // timer3 = setInterval(moveCameraZ1,30);

        /*$("#WebGL-output").swipeUp(function(){
         if(!upon){
         timer1 = setInterval(function(){
         camera.position.z += 0.2;
         },30);
         }
         clearInterval(timer2);
         clearInterval(timer3);
         clearInterval(timer4);
         clearInterval(timer5);
         clearInterval(timer6);
         clearInterval(timer7);
         event.preventDefault();
         upon = 1;
         downon = 0;
         console.log('up');

         })
         .swipeDown(function(){
         if(!downon){
         timer2 = setInterval(function(){

         camera.position.z -= 0.2;

         },30);
         upon = 0;
         downon = 1;
         event.preventDefault();
         clearInterval(timer1);
         clearInterval(timer3);
         clearInterval(timer4);
         clearInterval(timer5);
         clearInterval(timer6);
         clearInterval(timer7);
         console.log('down');
         }
         })
         .singleTap(function(){
         //event.preventDefault();
         upon = 0;
         downon = 0;
         clearInterval(timer1);
         clearInterval(timer2);
         clearInterval(timer3);
         clearInterval(timer4);
         clearInterval(timer5);
         clearInterval(timer6);
         clearInterval(timer7);
         console.log("单击时停下的位置"+ camera.position.z);
         })
         .doubleTap(function(){
         //event.preventDefault();
         upon = 0;
         downon = 0;
         clearInterval(timer1);
         clearInterval(timer2);
         clearInterval(timer3);
         clearInterval(timer4);
         clearInterval(timer5);
         clearInterval(timer6);
         clearInterval(timer7);
         })*/

        /*tween.min.js*/
        var option = {
            px : camera.position.x,
            py : camera.position.y,
            pz : camera.position.z
        };
        /* var tween = new TWEEN.Tween(option)
         .to({
         px:[-50,-40,-40,-50,-50,-50,-50.-50],
         pz:[-40,-40,-40,-40,-50,-50,-40,-40]
         },10000)
         .onUpdate(function(){
         camera.position.x = this.px;
         camera.position.y = this.pz;
         })
         .start();*/

        /*Tweenjs*/
        /*createjs.Tween.get(camera.position).to({x:-2},1000).call(handleComplete);
         function handleComplete(){
         camera.position.x +=  ( mouseX - camera.position.x )  * 0.0001;
         }*/
        var positionC = {x:0,y:0,z:0};

        function mouseMoveX(){
            //camera.position.x += ( (mouseX)/300 - camera.position.x)  * 0.001;
            var tweenX = new TWEEN.Tween(camera.position)
                    .to({x:mouseX/400},5000)
                    .start();
        }

        function mouseMoveY(){
            // camera.position.y += ( - (mouseY)/200 - camera.position.y ) * 0.001;
            var tweenY = new TWEEN.Tween(camera.position)
                    .to({y:-mouseY/300},5000)
                    .start();
        }

        function moveCameraZ1(){
            tweenZ1 =  new TWEEN.Tween(camera.position)
                    .to({z:130},8000)
                    .delay(200)
                    .start();
            //   return tweenZ1;
        }
        /*timer1 = setInterval(function(){
         camera.position.z += 0.2;
         },30);*/

        function moveCameraZ2(){
            tweenZ2 =  new TWEEN.Tween(camera.position)
                    .to({z:10},8000)
                    .start();
        }

        function moveCameraZ3(){
            tweenZ3 =  new TWEEN.Tween(camera.position)
                    .to({z:38},8000)
                    .start();
        }

        function moveCameraZ4(){
            tweenZ4 =  new TWEEN.Tween(camera.position)
                    .to({z:58},8000)
                    .start();
        }

        function moveCameraZ5(){
            tweenZ5 =  new TWEEN.Tween(camera.position)
                    .to({z:103},8000)
                    .start();
        }
        function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){

                timer10 = setInterval(mouseMoveX,100);

                timer11 = setInterval(mouseMoveY,30);

                var scrollFunc = function (e) {
                    var direct = 0;
                    e = e || window.event;
                    if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
                        if (e.wheelDelta > 0) { //当滑轮向上滚动时
                            /* if(!upon){
                             timer8 = setInterval(moveCameraZ1,30);
                             }
                             clearInterval(timer9);
                             clearInterval(timer3);
                             clearInterval(timer4);
                             clearInterval(timer5);
                             clearInterval(timer6);
                             clearInterval(timer7);
                             //event.preventDefault();
                             upon = 1;
                             downon = 0;*/
                            moveCameraZ1();
                            console.log('pcup');
                            // return false;
                        }
                        if (e.wheelDelta < 0) { //当滑轮向下滚动时
                            /*if(!downon){
                             timer9 = setInterval(moveCameraZ2,30);
                             upon = 0;
                             downon = 1;
                             //event.preventDefault();
                             clearInterval(timer8);
                             clearInterval(timer3);
                             clearInterval(timer4);
                             clearInterval(timer5);
                             clearInterval(timer6);
                             clearInterval(timer7);
                             console.log('pcdown');
                             }*/
                            moveCameraZ2();
                        }
                    } else if (e.detail) {  //Firefox滑轮事件
                        if (e.detail> 0) { //当滑轮向上滚动时
                            /*if(!upon){
                             timer8 = setInterval(moveCameraZ1,30);
                             }
                             clearInterval(timer9);
                             clearInterval(timer3);
                             clearInterval(timer4);
                             clearInterval(timer5);
                             clearInterval(timer6);
                             clearInterval(timer7);
                             //event.preventDefault();
                             upon = 1;
                             downon = 0;*/
                            console.log('pcffup');
                            moveCameraZ1();
                            // return false;
                        }
                        if (e.detail< 0) { //当滑轮向下滚动时
                            if(!downon){
                                /*timer9 = setInterval(moveCameraZ2,30);
                                 upon = 0;
                                 downon = 1;
                                 //event.preventDefault();
                                 clearInterval(timer8);
                                 clearInterval(timer3);
                                 clearInterval(timer4);
                                 clearInterval(timer5);
                                 clearInterval(timer6);
                                 clearInterval(timer7);*/
                                moveCameraZ2();
                                console.log('pcffdown');
                            }
                        }
                    }
                    // scrollFunc(direct);
                }
                webgl.onclick = function(){
                    /*upon = 0;
                     downon = 0;
                     clearInterval(timer8);
                     clearInterval(timer9);
                     clearInterval(timer3);
                     clearInterval(timer4);
                     clearInterval(timer5);
                     clearInterval(timer6);
                     clearInterval(timer7);*/
                    TWEEN.removeAll();
                    console.log("pc单击时停下的位置"+camera.position.x+','+camera.position.y+','+ camera.position.z+"||||||"+"mousex:"+mouseX+"mousey:"+mouseY);
                }
                //给页面绑定滑轮滚动事件
                if (document.addEventListener) {
                    document.addEventListener('DOMMouseScroll', scrollFunc, false);
                }
                //滚动滑轮触发scrollFunc方法
                window.onmousewheel = document.onmousewheel = scrollFunc;
            }
        }
        browserRedirect();

        util.toucher(document.getElementById("WebGL-output"))
                .on('swipeUp',function(){
                    /* if(!upon){
                     timer1 = setInterval(function(){
                     camera.position.z += 0.2;
                     },30);
                     }
                     clearInterval(timer2);
                     clearInterval(timer3);
                     clearInterval(timer4);
                     clearInterval(timer5);
                     clearInterval(timer6);
                     clearInterval(timer7);
                     //event.preventDefault();
                     upon = 1;
                     downon = 0;*/
                    moveCameraZ1();
                    console.log('up');
                    //return false;
                })
                .on("swipeDown",function(){
                    /*if(!downon){
                     timer2 = setInterval(function(){

                     camera.position.z -= 0.2;

                     },30);
                     upon = 0;
                     downon = 1;
                     //event.preventDefault();
                     clearInterval(timer1);
                     clearInterval(timer3);
                     clearInterval(timer4);
                     clearInterval(timer5);
                     clearInterval(timer6);
                     clearInterval(timer7);
                     console.log('down');
                     }*/
                    moveCameraZ2();
                })
                .on("singleTap",function(){
                    // event.preventDefault();
                    /* upon = 0;
                     downon = 0;
                     clearInterval(timer1);
                     clearInterval(timer2);
                     clearInterval(timer3);
                     clearInterval(timer4);
                     clearInterval(timer5);
                     clearInterval(timer6);
                     clearInterval(timer7);*/
                    TWEEN.removeAll();
                    console.log("单击时停下的位置"+ camera.position.z);
                });

        var listli = document.getElementsByTagName("li");
        listli[0].onclick = function(){
            /*upon = 0;
             downon = 0;
             clearInterval(timer1);
             clearInterval(timer2);
             clearInterval(timer3);
             clearInterval(timer4);
             clearInterval(timer5);
             clearInterval(timer6);
             clearInterval(timer7);
             clearInterval(timer8);
             clearInterval(timer9);
             console.log(camera.position.z);

             timer4 = setInterval(moveCameraZ3,30);*/
            moveCameraZ3();

        };
        listli[1].onclick = function(){
            /*upon = 0;
             downon = 0;
             clearInterval(timer1);
             clearInterval(timer2);
             clearInterval(timer3);
             clearInterval(timer4);
             clearInterval(timer5);
             clearInterval(timer6);
             clearInterval(timer7);
             clearInterval(timer8);
             clearInterval(timer9);
             console.log(camera.position.z);

             timer5 = setInterval(moveCameraZ4,30);*/
            moveCameraZ4();

        };
        listli[2].onclick = function(){
            /*upon = 0;
             downon = 0;
             clearInterval(timer1);
             clearInterval(timer2);
             clearInterval(timer3);
             clearInterval(timer4);
             clearInterval(timer5);
             clearInterval(timer6);
             clearInterval(timer7);
             clearInterval(timer8);
             clearInterval(timer9);
             console.log(camera.position.z);

             timer6 = setInterval(moveCameraZ5,30);*/
            moveCameraZ5();

        };
        listli[3].onclick = function(){
            /*upon = 0;
             downon = 0;
             clearInterval(timer1);
             clearInterval(timer2);
             clearInterval(timer3);
             clearInterval(timer4);
             clearInterval(timer5);
             clearInterval(timer6);
             clearInterval(timer7);
             clearInterval(timer8);
             clearInterval(timer9);
             console.log(camera.position.z);

             timer7 = setInterval(moveCameraZ1,30);*/
            moveCameraZ1();

        };

        $(".loading").hide();
        $("#WebGL-output").show();
        $("#list").show();
        moveCameraZ1();

    };
</script>
</body>
</html>